<template>
  <view class="message">
		<view class="top">
		  <view>
		    <text class="toptext">法务资讯</text>
		  </view>
		  <view class="topbtn" @click="search">
				<image src="../../static/路径@1x.png" mode="" class="image1"></image>
				<text>搜一搜: 律师、问答、问题</text>
			</view>
		</view>
		<view class="seven-btn">
			<view class="seven-btn-one">
				<image src="../../static/画板 1@1x.png" mode="" style="width: 96rpx; height: 94rpx;" @click="jthy"></image>
				<image src="../../static/劳动.png" mode="" style="width: 96rpx; height: 94rpx;" @click="ldzw"></image>
				<image src="../../static/画板 3@1x.png" mode="" style="width: 96rpx; height: 94rpx;" @click="zqzw"></image>
				<image src="../../static/画板 10@1x.png" mode="" style="width: 96rpx; height: 94rpx;" @click="jtsg"></image>
				<image src="../../static/画板 11@1x.png" mode="" style="width: 96rpx; height: 94rpx;" @click="gspc"></image>
				<image src="../../static/画板 13@1x.png" mode="" style="width: 96rpx; height: 94rpx;" @click="xsbh"></image>
				<image src="../../static/画板 12@1x.png" mode="" style="width: 96rpx; height: 94rpx;" @click="gsjy"></image>
			</view>
		</view>
		<view class="recommend">
			<text>热门推荐</text>
			<view class="recommend-n">
				<view class="recommend-n-vw" v-for="item in hotList" :key="item.cid">
					<view class="recommend-n-vw-left">
						<image src="../../static/路径@1x (1).png" mode="">
						</image>
						<text>{{item.type_fastname}}</text>
					</view>
					<view class="recommend-n-vw-right" style="margin-left: 8rpx;" v-html="item.content"></view>
				</view>
			</view>
		</view>
		<view class="two-btn">
			<view class="two-btn-left" @click="zixun">
				<text class="text1">免费咨询</text>
				<text class="text2">每日两次免费问</text>
				<image src="../../static/白健康咨询.png" mode="" style="width: 72rpx; height: 72rpx;"></image>
			</view>
			<view class="two-btn-right" @click="siwen">
				<text class="text1">私问</text>
				<text class="text2">问题急速相应</text>
				<image src="../../static/白售前咨询.png" mode="" style="width: 72rpx; height: 72rpx;"></image>
			</view>
		</view>
		<view class="inv-h-w">
			<tui-tabs :tabs="tabs"
				:currentTab="currentTab" 
				@change="changes" 
				width="250"
				bold="true"
				selectedColor="black"
				sliderWidth="50"
				sliderBgColor="#036faf"
				></tui-tabs>
		</view>
		<view class="Inv1" v-show="currentTab == 0">
			<view class="Inv1-vw" v-for="item in questions" :key="item.id" @click="quesHandler(item)">
				<text class="text3">{{item.title}}</text>
				<text class="text4">{{item.type_name}}</text>
				<view class="Inv1-view">
					<view class="" style="margin-right: 74rpx;"><image src="../../static/眼睛@1x.png" style="width: 24rpx; height: 24rpx; margin-right: 6rpx;"></image>{{item.visit}}</view>
					<view class=""><image src="../../static/点赞@1x.png" style="width: 24rpx; height: 24rpx; margin-right: 6rpx;"></image>{{item.like}}</view>
				</view>
			</view>
			<van-cell title="更多专业问答" is-link @click="zywdHandler" />
		</view>
		<view v-show="currentTab == 1">
			<view class="flzs" v-for="f in know" :key="f.id" @click="knowHandler(f)">
				<view class="flzs-vw">
					<text class="flzs-vw-top">#{{f.type_name}}</text>
					<text class="flzs-vw-content">{{f.title}}</text>
					<view class="Inv1-view">
						<view class="" style="margin-right: 74rpx;"><image src="../../static/眼睛@1x.png" style="width: 24rpx; height: 24rpx; margin-right: 6rpx;"></image>{{f.visit}}</view>
						<view class=""><image src="../../static/点赞@1x.png" style="width: 24rpx; height: 24rpx; margin-right: 6rpx;"></image>{{f.like}}</view>
					</view>
				</view>
			</view>
			<van-cell title="更多法律知识" is-link @click="flzsHandler" />
		</view>
		<view v-show="currentTab == 2">
			<view class="answer-content" v-for="i in answer" :key="i.id" @click="answerHandler(i)">
				<view class="answer-content-view" style="height: 262rpx; width: 694rpx; margin: 24rpx 0 0 28rpx;">
					<view class="text1">我上了九天半的班，法定假日我请假他不准，然后把我 辞退了，结工资的时候多转5...</view>
					<view class="answer-content-center">
						<view class="answer-content-center-photo">
							<image src="../../static/首页路径.png" mode="" style="width: 80rpx; height: 80rpx;" @click.stop="grzx"></image>
							<image class="image2" src="../../static/分组 4@1x.png" mode="" style="width: 20rpx; height: 20rpx;"></image>
						</view>
						<view class="answer-content-center-view">
							<view class="answer-content-center-text">
								<a href="" style="color: #616C9A;">彭梓芳<text style="font-size: 22rpx; color: #383838;">律师</text></a>
							</view>
							<text style="color: #A6A6A6;">{{i.contentTime}}</text>
						</view>
					</view>
					<text class="answer-content-view-tex">{{i.content}}</text>
				</view>
			</view>
			<van-cell title="更多法律问题" is-link @click="flwtHandler" />
		</view>
	</view>
	<fourbar mycurrent="1"></fourbar>
</template>

<script>
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
	import { index, getHall } from "../../utils/utils";
	export default {
		components:{
			tuiTabs
		},
		data() {
			return {
				currentTab: 0, // 标签页
				tabs: [{name: "专业问答"}, {name: "法律知识"}, {name: "法律问题"}], // 标签内容
				hotList: [], // 热门列表
				answer: [], // 律师问答
				questions: [], // 专业问答
				know: [], // 法律知识
			};
		},
		onLoad() {
			index((res) => {
				console.log('首页信息',res);
			})
			getHall((e) => {
				console.log('法堂',e);
				this.answer = e.data.answer
				this.hotList = e.data.hotList
				this.know = e.data.know
				this.questions = e.data.questions
			})
		},
		methods: {
			// 标签页切换事情
			changes(e) {
				this.currentTab = e.index
				// console.log(this.currentTab );
			},
			//  跳转到咨询页面
			zixun () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=免费咨询"
				})
			},
			// 跳转到私问私问页面
			siwen () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=私问&qian=￥30"
				})
			},
			// 跳转到搜索页
			search () {
				uni.navigateTo({
					url: "/pages/Attorney side/search/search"
				})
			},
			// 跳转到个人中心
			grzx (e) {
				e.stopPropagation(); // 阻止事件冒泡
				uni.navigateTo({
					url: "/pages/Attorney side/lawyerHome/lawyerHome"
				})
			},
			// 更多专业问答跳转
			zywdHandler () {
				uni.navigateTo({
					url: "/pages/Attorney side/zywdPage/zywdPage"
				})
			},
			// 更多法律问题
			flwtHandler () {
				uni.navigateTo({
					url: "/pages/Attorney side/lsjdPage/lsjdPage"
				})
			},
			// 更多法律知识
			flzsHandler () {
				uni.navigateTo({
					url: "/pages/Attorney side/flzsPage/flzsPage"
				})
			},
			// 家庭婚姻跳转
			jthy (e) {
				uni.navigateTo({
					url: "/pages/Attorney side/flzsPage/flzsPage"
				})
			},
			// 劳动纠纷跳转
			ldzw (e) {
				uni.navigateTo({
					url: "/pages/Attorney side/flzsPage/flzsPage"
				})
			},
			// 债权债务跳转
			zqzw (e) {
				uni.navigateTo({
					url: "/pages/Attorney side/flzsPage/flzsPage"
				})
			},
			// 交通事故跳转
			jtsg (e) {
				uni.navigateTo({
					url: "/pages/Attorney side/flzsPage/flzsPage"
				})
			},
			// 工伤赔偿跳转
			gspc (e) {
				uni.navigateTo({
					url: "/pages/Attorney side/flzsPage/flzsPage"
				})
			},
			// 刑事辩护跳转
			xsbh (e) {
				uni.navigateTo({
					url: "/pages/Attorney side/flzsPage/flzsPage"
				})
			},
			// 公司经营跳转
			gsjy (e) {
				uni.navigateTo({
					url: "/pages/Attorney side/flzsPage/flzsPage"
				})
			},
			// 专业问答内容点击跳转
			quesHandler (e) {
				console.log(e);
				// uni.navigateTo({
				// 	url: "/pages/Attorney side/zywdContent/zywdContent"
				// })
			},
			// 法律知识内容点击跳转
			knowHandler (e) {
				console.log(e);
				// uni.navigateTo({
				// 	url: "/pages/Attorney side/flzsContent/flzsContent"
				// })
			},
			// 法律问题内容点击跳转
			answerHandler (e) {
				console.log(e);
				// uni.navigateTo({
				// 	url: "/pages/Attorney side/lsjdDa/lsjdDa"
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		height: 100%;
		width: 100vw;
	}
	.top {
	  width: 750rpx;
	  height: 300rpx;
	  background-color: #384B85;
	}
	.top > text {
	  position: absolute;
	  left: 28rpx;
	  top: 110rpx;
	  width: 136rpx;
	  height: 46rpx;
	  opacity: 1;
	  font-size: 32rpx;
	  font-weight: normal;
	  line-height: 46rpx;
	  letter-spacing: 2rpx;
	  color: #FFFFFF;
	}
	.toptext {
	  position: absolute;
	  left: 146rpx;
	  top: 110rpx;
	  width: 462rpx;
	  height: 2rpx;
	  opacity: 1;
	  font-family: 思源黑体;
	  font-size: 32rpx;
	  font-weight: 500;
	  line-height: 46rpx;
	  text-align: center;
	  letter-spacing: 2rpx;
	  color: #FFFFFF;
	  text-shadow: 0rpx 2rpx 2rpx rgba(0, 0, 0, 0.4);
	}
	.topbtn {
	  position: absolute;
		display: flex;
		text-align: center;
		align-items: center;
	  left: 40rpx;
	  top: 196rpx;
	  width: 672rpx;
	  height: 64rpx;
	  border-radius: 32rpx;
	  opacity: 1;
	  background: rgba(255, 255, 255, 0.2);
	}
	.image1 {
		width: 32rpx;
		height: 32rpx;
		margin: 4rpx 8rpx 0 32rpx;
	}
	.topbtn > text {
		font-size: 28rpx;
		font-weight: normal;
		line-height: 32rpx;
		text-align: center;
		letter-spacing: 0rpx;
		color: rgba(255, 255, 255, 0.6);
	}
	
	.seven-btn {
		width: 770rpx;
		height: 158rpx;
		overflow: hidden;
		margin-left: 28rpx;
	}
	.seven-btn-one {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	
	.recommend {
		width: 750rpx;
		margin-top: 12rpx;
		overflow: hidden;
	}
	.recommend > text {
		display: block;
		margin: 32rpx 0 0 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 32rpx;
		color: #383838;
	}
	.recommend-n {
		margin: 10rpx 0 0 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: min-content;
	}
	.recommend-n-vw {
		background: #EDEDED;
		width: 100%;
		height: 52rpx;
		font-size: 26rpx;
		font-weight: normal;
		border-radius: 26rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		padding: 0 6rpx 0 20rpx;
	}
	
	.recommend-n-vw-right {
		line-height: 20rpx;
	}
	
	.recommend-n-vw-left {
		position: relative;
	}
	.recommend-n-vw-left > image {
		width: 42rpx;
		height: 32rpx;
	}
	.recommend-n-vw-left > text {
		color: white;
		font-size: 11px;
		position: absolute;
		top: 0;
		left: 5px;
	}
	

	.two-btn {
		width: 750rpx;
		height: 164rpx;
		display: flex;
		align-items: center;
	}
	.two-btn-left {
		width: 340rpx;
		height: 136rpx;
		border-radius: 16rpx;
		background: linear-gradient(90deg, #6CB983 0%, #99CDA7 100%);
		overflow: hidden;
		position: relative;
		margin: 12rpx 12rpx 16rpx 28rpx;
	}
	.two-btn-left > .text1 {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 32rpx;
		color: #FFFFFF;
		margin: 32rpx 0 0 34rpx;
	}
	.two-btn-right > .text1 {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 32rpx;
		color: #FFFFFF;
		margin: 32rpx 0 0 34rpx;
	}
	.text2 {
			display: block;
			font-size: 22rpx;
			font-weight: normal;
			line-height: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			margin: 14rpx 0 0 34rpx;
		}
	.two-btn-left > image {
		position: absolute;
		top: 32rpx;
		left: 244rpx;
	}
	.two-btn-right {
		width: 340rpx;
		height: 136rpx;
		border-radius: 16rpx;
		background: linear-gradient(90deg, #73B8D9 0%, #94C2E3 100%);
		position: relative;
	}
	.two-btn-right > image {
		position: absolute;
		top: 32rpx;
		left: 244rpx;
	}
	
	.Control {
		width: 404rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin: 16rpx 0 0 24rpx;
	}
	.inv-h {
		font-size: 28rpx;
		flex: 1;
		text-align: center;
		height: 54rpx;
		line-height: 54rpx;
	}
	.inv-h-se > view {
		width: 48rpx;
		height: 4rpx;
		background: #036FAF;
		margin: 0 auto;
	}
	.inv-h-se {
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
	}
	.Inv1 {
		width: 100vw;
		height: 100%;
	}
	.Inv1-vw {
		width: 694rpx;
		margin: 32rpx 0 0 28rpx;
		border-bottom: 2rpx solid #F0F0F0;
	}
	.text3 {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 32rpx;
		color: #383838;
		margin-bottom: 22rpx;
	}
	.text4 {
		width: 694rpx;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 32rpx;
		color: #4D4D4D;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;  
		overflow: hidden;
	}
	.Inv1-view {
		display: flex;
		margin-top: 20rpx;
		color: #A6A6A6;
		align-items: center;
	}
	
	.answer-content {
		width: 750rpx;
		height: 222rpx;
		border-bottom: solid 2rpx #F0F0F0;
	}
	.answer-content-view > .text1 {
		width: 694rpx;
		height: 72rpx;
		line-clamp: 2;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 32rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2; /* 这里的数字应该与你的行限制相同 */
		-webkit-box-orient: vertical;  
		overflow: hidden;
	}
	.answer-content-view > .answer-content-view-tex {
		display: -webkit-box;
		-webkit-line-clamp: 1; /* 这里的数字应该与你的行限制相同 */
		-webkit-box-orient: vertical;  
		overflow: hidden;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 32rpx;
	}
	.answer-content-center {
		display: flex;
		margin-bottom: 16rpx;
	}
	.answer-content-center-photo {
		width: 100rpx;
		height: 80rpx;
	}
	.answer-content-center-photo > .image2 {
		position: relative;
		left: -14rpx;
		bottom: 4rpx;
	}
	.answer-content-center-text {
		width: 140rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: normal;
		display: flex;
		justify-content: space-between;
	}
	.answer-content-center-view {
		font-size: 24rpx;
	}
	.answer-content-footer {
		width: 672rpx;
		height: 32rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		font-size: 24rpx;
	}
	
	::v-deep.van-cell__title {
		font-weight: bold;
	}
	
	.flzs {
		width: 100vw;
		height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.flzs-vw {
		width: 92vw;
		display: flex;
		flex-direction: column;
	}
	.flzs-vw > .flzs-vw-top {
		color: #999999;
		font-size: 12px;
	}
	.flzs-vw > .flzs-vw-content {
		max-width: 80vw;
		color: black;
		font-weight: 500;
		font-size: 18px;
		margin: 5px 0 8px 0;
	}
	.flzs-vw > .Inv1-view {
		margin-top: 0px;
	}
</style>